<template>
  <div class="container">
    <van-nav-bar
      title="搜索中心"
      left-arrow
      @click-left="$router.back()"
    />
    <!-- 搜索输入区域 -->
    <van-search
      v-model="keyWord"
      shape="round"
      placeholder="请输入搜索关键词"
      @search="onSearch"
    />
    <!-- 根据输入关键词补全 -->
    <van-cell-group
      class="suggest-box"
      v-if="keyWord"
    >
      <!-- span高亮联想关键词 -->
      <van-cell
        icon="search"
        v-for="(sug,i) in suggestList"
        :key="i"
        @click="onSearch(sug.replace(`<span>${keyWord}</span>`,keyWord))"
      >
        <p v-html="sug"></p>
      </van-cell>
    </van-cell-group>
    <!-- 搜索历史记录 -->
    <div
      class="history-box"
      v-else-if="historyList.length"
    >
      <div class="head">
        <span>历史记录</span>
        <!-- 删除全部 -->
        <van-icon
          @click="delAllHistory"
          name="delete"
        ></van-icon>
      </div>
      <van-cell-group>
        <van-cell
          v-for="(history,i) in historyList"
          :key="i"
        >
          <a
            @click="onSearch(history)"
            class="word_btn"
          >{{history}}</a>
          <!-- 删除 -->
          <van-icon
            class="close_btn"
            slot="right-icon"
            name="cross"
            @click="delHistory(i)"
          />
        </van-cell>
      </van-cell-group>
    </div>
  </div>
</template>

<script>
import { suggest } from '@/api/article'
/**
 * 搜索历史记录
 * 1. 把用户搜索记录存储到本地
 * 设计存储的数据结构：数组['搜索关键词1','搜索关键词1']
 */
// 存储的key
const TT_SHISTORY = 'TT_SHISTORY'
// // 造假数据
// const historyList = ['小米', '华为', '前端']
// // 存储假数据
// localStorage.setItem(TT_SHISTORY, JSON.stringify(historyList))

/**
 * 搜索关键词补全
 * 补全时机：用户输入搜索关键词发生变化=》调用后台补全接口=》获取当前关键词的补全列表
 */

export default {
  name: 'search-index',
  data () {
    return {
      keyWord: '',
      // 搜索历史记录=> 先从本地获取历史搜索记录
      historyList: JSON.parse(localStorage.getItem(TT_SHISTORY)) || [],
      // 补全列表
      suggestList: []
    }
  },
  watch: {
    // 监控keyWord关键词的变化
    keyWord () {
      console.log(this)
      // 函数防抖=》设置延迟执行时间，规定时间内如果再次执行，会被取消，重新计时
      this.timer && clearTimeout(this.timer)
      // 存储定时器ID=> 存储到this上=》不是响应式数据
      this.timer = setTimeout(async () => {
        // 延迟执行的逻辑
        /**
         * 1. 如果关键词为空，需要清空补全列表
         * 2. 调用接口查询补全列表
         */
        if (!this.keyWord) {
          this.suggestList = []
          return
        }
        const { data } = await suggest(this.keyWord)
        // 替换后台返回的补全列表=》把关键词用span包裹=》<span>关键词</span>补全词
        this.suggestList = data.options.map(sug => sug.toLowerCase().replace(this.keyWord, `<span>${this.keyWord}</span>`))
        // console.log(data.options, this.suggestList)
      }, 600)
    }
  },
  methods: {
    // 删除所有历史记录
    delAllHistory () {
      // 内存删除
      this.historyList = []
      // 本地更新
      this.updateHistory()
    },
    // 删除某个搜索历史
    delHistory (i) {
      // 内存删除
      this.historyList.splice(i, 1)
      // 本地删除=>更新删除后的本地缓存
      this.updateHistory()
    },
    // 更新本地存储
    updateHistory () {
      localStorage.setItem(TT_SHISTORY, JSON.stringify(this.historyList))
    },
    /**
     * 执行时机
     * 1. PC端通过键盘enter（回车键）触发
     * 2. 输入法软件盘的确定触发
     */
    /**
     * val 当前输入的关键词
     */
    onSearch (val) {
      /**
       * 跳转之前存储搜索历史记录=》排重
       * 1. Set结构
       * 2. 判断在数组中是否存在
       */
      if (!this.historyList.includes(val)) {
        this.historyList.push(val)
        this.updateHistory()
      }

      // console.log(this.keyWord, val)
      // 跳转到搜索结果页=》携带查询参数=》关键词
      this.$router.push({ path: '/search/result', query: { q: val } })
    }
  }
}
</script>

<style scoped lang='less'>
.suggest-box {
  /deep/ .van-cell {
    padding: 10px 20px;
    color: #999;
    p {
      span {
        color: red;
      }
    }
  }
}
.history-box {
  padding: 0 20px;
  .head {
    line-height: 36px;
    color: #999;
    text-align: left;
    .van-icon {
      font-size: 16px;
      float: right;
      margin-top: 10px;
    }
  }
  .van-cell {
    padding: 10px 0;
  }
  .word_btn {
    color: #3296fa;
  }
  .close_btn {
    margin-top: 5px;
    color: #999;
  }
}
</style>
